<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>

<script type="text/javascript" src="<c:url value="/layout/javascript/jquery.form.js"/>">/**/</script>
<script type="text/javascript" src="<c:url value="/layout/javascript/form.js"/>">/**/</script>

<script type="text/javascript">
/* Stack per la creazione di un nuovo software/hardaware */
var swstack = new Array(10, 9, 8, 7, 6, 5, 4, 3, 2);
var hwstack = new Array(10, 9, 8, 7, 6);

$(document).ready(function() {
	$("#tabs1, #tabs2, #tabs3, #tabs4").tabs({
		collapsible: false
	});
	$("#tabs1sw").tabs({
		collapsible: false
	});

	$("#spanAddPrinter").hide();

	$("#tabs1, #tabs2, #tabs3, #tabs4").tabs('select', 0);
	$("#tabs1sw").tabs('select', 0);

	$('#anotherSW').click(function (event) {
		event.preventDefault();
		anotherSW('<bean:message key="device.software" bundle="device"/>');
	});

	$('#anotherHW').click(function (event) {
		event.preventDefault();
		anotherHW('<bean:message key="device.hardware" bundle="device"/>');
	});

	var options = {
       target:        '#validationbox',
       beforeSubmit:  function () {
                            $('#validationbox').html('<img alt="<bean:message key="saving.message"/>" src="<c:url value="/layout/images/ajax-loader.gif"/>"/><bean:message key="saving.message"/>');
                            $('#validationbox').dialog('open');
                      },
       error:         function () {
                          $('#validationbox').dialog('close');
                          showErrorDialog('#dialog', 
                                 { msg : "<bean:message key="device.add.err.msg" bundle="errors"/>",
                                   boxTitle : "<bean:message key="device.add.err.boxTitle" bundle="errors"/>",
                                   msgStatus: "<bean:message key="device.add.err.msgStatus" bundle="errors"/>" });
                      }
    };

    $('#formDevice').ajaxForm(options);

    // Si sta editando e non aggiungendo un device
    if ('${requestScope.action}'.match(/[a-z]+(?=\.do)/) == "editdevice") {

        $('.radioHWType').attr('disabled', 'disabled');
        
	    if ('${requestScope.deviceform.deviceType}' == 'Printer') {
	    	showaddprinter();
	    } else {
	    	showadddevice();	
	    }
	
	    // Inizializza lo stack dei software per la fase di editing
	    var numSoftware = '${requestScope.deviceform.swSize}';
	    for (i=0; i<numSoftware -1; i++) {
	    	swstack.pop();
	    }

	    // Inizializza lo stack dell'hardware per la fase di editing
        var numHardware = '${requestScope.deviceform.hwSize}';
        for (i=0; i<numHardware -5; i++) {
            hwstack.pop();
        }
    }
});

</script>

<div id="content">
		<!--FORM-->
		<fieldset id="fieldset">
			<legend class="fieldsetLabel"><bean:message key="device.newdevice" bundle="device"/></legend>
			<div id="form_containerDevice">
				<html:form  styleId="formDevice" styleClass="appnitro" action="${requestScope.action}" enctype="multipart/form-data">
				  <div class="leftAddDevice"> 
				   <fieldset class="fieldsetAddDevice">
	    			   <legend class="fieldsetLabelDialog"><bean:message key="device.devicetype" bundle="device"/></legend>
					   <label for="serial"><bean:message key="device.computer" bundle="device"/></label>
					   <html:radio styleClass="radioHWType" value="Computer" property="deviceType" onclick="javascript:showadddevice();"/>
					   <label for="serial"><bean:message key="device.printer" bundle="device"/></label>
					   <html:radio styleClass="radioHWType" value="Printer" property="deviceType" onclick="javascript:showaddprinter();"/>
					   <html:hidden property="deviceType"/>
				   </fieldset>
				   <fieldset class="fieldsetAddDevice">
    					<legend class="fieldsetLabelDialog">
    					   <span id="spanAddComputer"><bean:message key="device.add" bundle="device"/> <bean:message key="device.computer" bundle="device"/></span>
    					   <span id="spanAddPrinter"><bean:message key="device.add" bundle="device"/> <bean:message key="device.printer" bundle="device"/></span>
    					</legend>
    			   		<div>
    			   		<html:hidden property="deviceID"/>
    			   		<html:hidden property="type" styleId="devtype" value="Computer"/>
    			   		<html:hidden property="size" value=""/>
							<ul>
							<li>
								<label class="description" for="nameHWDev"><bean:message key="device.name" bundle="device"/></label>
								<div>
									<html:text property="name"  styleClass="element text medium" maxlength="255"/>
								</div> 
							</li>		
							<li>
								<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
								<div> 
									<html:text property="model"  styleClass="element text medium" maxlength="255"/>
								</div> 
							</li>		
							<li>
								<label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
								<div>
									<html:text property="vendor"  styleClass="element text medium" maxlength="255"/> 
								</div> 
							</li>
							<li class="buttons">
								<html:submit styleId="saveForm" styleClass="button_text">
								    <bean:message key="button.save"/>
								</html:submit>
							</li>		
							</ul>
						</div>
    			   </fieldset>
    			   <fieldset class="fieldsetAddSoftware">
    					<legend class="fieldsetLabelDialog"><bean:message key="device.software" bundle="device"/></legend>
    					<div id="tabs1sw" class="tabsSoftware">
							<ul id="ulli">
								<li><a href="#tabssw-1"><bean:message key="device.software.so" bundle="device"/></a></li>
							    <c:if test="${requestScope.deviceform.swSize gt 0}">
							    <c:forEach begin="1" items="${requestScope.deviceform.software}" var="item" varStatus="index" >
							    <li>
							     <a href="#tabssw-${index.count + 1}">${item.name}</a>
							     <a id="deleteSW-${index.count + 1}" href="javascript:removeSW('#tabssw-${index.count + 1}');"><b>x</b></a>
							    </li>
							    </c:forEach>
							    </c:if>
							</ul>
							<div id="tabssw-1">
							<html:hidden property="software[0].deviceID"/>
                            <html:hidden property="software[0].type" value="Software"/>
                            <html:hidden property="software[0].size" value=""/>
                            <input type="hidden" name="software[0].name" value="<bean:message key="device.software.so" bundle="device"/>" />
								<ul>
								<li>
									<label class="description" for="modelSWDev"><bean:message key="device.model" bundle="device"/></label>
									<div>
										<html:text property="software[0].model"  styleClass="element text medium" maxlength="255"/>
									</div> 
								</li>		
								<li>
									<label class="description" for="vendorSWDev"><bean:message key="device.vendor" bundle="device"/></label>
									<div>
										<html:text property="software[0].vendor"  styleClass="element text medium" maxlength="255"/> 
									</div> 
								</li>	
								</ul>
							</div>
							<c:if test="${requestScope.deviceform.swSize gt 0}">
							<c:forEach begin="1" items="${requestScope.deviceform.software}" var="item" varStatus="index">
								<div id="tabssw-${index.count + 1}">
		                            <html:hidden property="software[${index.count}].deviceID"/>
		                            <html:hidden property="software[${index.count}].type" value="Software"/>
		                            <html:hidden property="software[${index.count}].size" value=""/>
		                            <input type="hidden" name="software[${index.count}].name" value="<bean:message key="device.software" bundle="device"/>" />
	                                <ul>
	                                <li>
	                                    <label class="description" for="modelSWDev"><bean:message key="device.model" bundle="device"/></label>
	                                    <div>
	                                        <html:text property="software[${index.count}].model"  styleClass="element text medium" maxlength="255"/>
	                                    </div> 
	                                </li>       
	                                <li>
	                                    <label class="description" for="vendorSWDev"><bean:message key="device.vendor" bundle="device"/></label>
	                                    <div>
	                                        <html:text property="software[${index.count}].vendor"  styleClass="element text medium" maxlength="255"/> 
	                                    </div> 
	                                </li>   
	                                </ul>
	                            </div>
							</c:forEach>
							</c:if>
						</div>
						<a id="anotherSW" href="#"><bean:message key="device.add" bundle="device"/> <bean:message key="device.software" bundle="device"/></a>
    				</fieldset>
    			  </div>
    			  
    			  <div class="rightAddDevice">
    			  <fieldset class="fieldsetAddDevice">
    					<legend class="fieldsetLabelDialog"><bean:message key="device.hardware" bundle="device"/></legend>
				   <!-- #Prima tabs# --> 
				   <div id="tabs1" class="tabs">
						<ul id="ullihw">
							<li><a href="#tabs-1"><bean:message key="device.hardware.mobo" bundle="device"/></a></li>
							<li><a href="#tabs-2"><bean:message key="device.hardware.cpu" bundle="device"/></a></li>
							<li><a href="#tabs-3"><bean:message key="device.hardware.hdd" bundle="device"/></a></li>
							<li><a href="#tabs-4"><bean:message key="device.hardware.ram" bundle="device"/></a></li>
							<li><a href="#tabs-5"><bean:message key="device.hardware.video" bundle="device"/></a></li>
							<c:if test="${requestScope.deviceform.hwSize gt 0}">
							<c:forEach begin="5" items="${requestScope.deviceform.hardware}" var="item" varStatus="index" >
                                <li>
                                 <a href="#tabs-${index.count + 5}"><html:text styleId="inputLable-${index.count + 5}" styleClass="inputLable" property="hardware[${index.count + 4}].name" maxlength="14" onblur="javascript:removeStyle('${index.count + 5}');" onclick="javascript:addStyle('${index.count + 5}');"/></a>
                                 <a id="deleteHW-${index.count + 5}" href="javascript:removeHW('#tabs-${index.count + 5}');"><b>x</b></a>
                                </li>
                            </c:forEach>
                            </c:if>
						</ul>
						<div id="tabs-1">
							<html:hidden property="hardware[0].deviceID"/>
	                        <html:hidden property="hardware[0].type" value="Hardware"/>
	                        <html:hidden property="hardware[0].size" value=""/>
	                        <input type="hidden" name="hardware[0].name" value="<bean:message key="device.hardware.mobo" bundle="device"/>" />
								<ul>
									<li>
										<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
										<div> 
											<html:text property="hardware[0].model"  styleClass="element text medium" maxlength="255"/>
										</div> 
									</li>		
									<li>
										<label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
										<div>
											<html:text property="hardware[0].vendor"  styleClass="element text medium" maxlength="255"/> 
										</div> 
									</li>
								</ul>
						</div>
						<div id="tabs-2">
							<html:hidden property="hardware[1].deviceID"/>
	                        <html:hidden property="hardware[1].type" value="Hardware"/>
	                        <html:hidden property="hardware[1].size" value=""/>
	                        <input type="hidden" name="hardware[1].name" value="<bean:message key="device.hardware.cpu" bundle="device"/>" />
								<ul>
									<li>
										<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
										<div> 
											<html:text property="hardware[1].model"  styleClass="element text medium" maxlength="255"/>
										</div> 
									</li>		
									<li>
										<label class="description" for="vendorHWDev"><bean:message key="device.size" bundle="device"/></label>
										<div>
											<html:text property="hardware[1].vendor"  styleClass="element text medium" maxlength="255"/> 
										</div> 
									</li>		
								</ul>
						</div>
						<div id="tabs-3">
							<html:hidden property="hardware[2].deviceID"/>
	                        <html:hidden property="hardware[2].type" value="Hardware"/>
	                        <input type="hidden" name="hardware[2].name" value="<bean:message key="device.hardware.hdd" bundle="device"/>" />
								<ul>
									<li>
										<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
										<div> 
											<html:text property="hardware[2].model"  styleClass="element text medium" maxlength="255"/>
										</div> 
									</li>		
									<li>
										<label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
										<div>
											<html:text property="hardware[2].vendor"  styleClass="element text medium" maxlength="255"/> 
										</div> 
									</li>		
									<li>
										<label class="description" for="sizeHWDev"><bean:message key="device.size" bundle="device"/></label>
										<div>
											<html:text property="hardware[2].size"  styleClass="element text small" maxlength="255"/> 
										</div> 
									</li>
								</ul>
						</div>
						<div id="tabs-4">
							<html:hidden property="hardware[3].deviceID"/>
	                        <html:hidden property="hardware[3].type" value="Hardware"/>
	                        <input type="hidden" name="hardware[3].name" value="<bean:message key="device.hardware.ram" bundle="device"/>" />
								<ul>
									<li>
										<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
										<div> 
											<html:text property="hardware[3].model"  styleClass="element text medium" maxlength="255"/>
										</div> 
									</li>		
									<li>
										<label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
										<div>
											<html:text property="hardware[3].vendor"  styleClass="element text medium" maxlength="255"/> 
										</div> 
									</li>		
									<li>
										<label class="description" for="sizeHWDev"><bean:message key="device.size" bundle="device"/></label>
										<div>
											<html:text property="hardware[3].size"  styleClass="element text small" maxlength="255"/> 
										</div> 
									</li>
								</ul>
						</div>
						<div id="tabs-5">
							<html:hidden property="hardware[4].deviceID"/>
	                        <html:hidden property="hardware[4].type" value="Hardware"/>
	                        <input type="hidden" name="hardware[4].name" value="<bean:message key="device.hardware.video" bundle="device"/>" />
								<ul>
									<li>
										<label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
										<div> 
											<html:text property="hardware[4].model"  styleClass="element text medium" maxlength="255"/>
										</div> 
									</li>		
									<li>
										<label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
										<div>
											<html:text property="hardware[4].vendor"  styleClass="element text medium" maxlength="255"/> 
										</div> 
									</li>		
									<li>
										<label class="description" for="sizeHWDev"><bean:message key="device.size" bundle="device"/></label>
										<div>
											<html:text property="hardware[4].size"  styleClass="element text small" maxlength="255"/> 
										</div> 
									</li>
								</ul>
						</div>
						<c:if test="${requestScope.deviceform.hwSize gt 0}">
						<c:forEach begin="5" items="${requestScope.deviceform.hardware}" var="item" varStatus="index">
							<div id="tabs-${index.count + 5}">
	                            <html:hidden property="hardware[${index.count + 4}].deviceID"/>
	                            <html:hidden property="hardware[${index.count + 4}].type" value="Hardware"/>
	                            <input type="hidden" name="hardware[${index.count + 4}].name" value="<bean:message key="device.hardware.video" bundle="device"/>" />
	                                <ul>
	                                    <li>
	                                        <label class="description" for="modelHWDev"><bean:message key="device.model" bundle="device"/></label>
	                                        <div> 
	                                            <html:text property="hardware[${index.count + 4}].model"  styleClass="element text medium" maxlength="255"/>
	                                        </div> 
	                                    </li>       
	                                    <li>
	                                        <label class="description" for="vendorHWDev"><bean:message key="device.vendor" bundle="device"/></label>
	                                        <div>
	                                            <html:text property="hardware[${index.count + 4}].vendor"  styleClass="element text medium" maxlength="255"/> 
	                                        </div> 
	                                    </li>       
	                                    <li>
	                                        <label class="description" for="sizeHWDev"><bean:message key="device.size" bundle="device"/></label>
	                                        <div>
	                                            <html:text property="hardware[${index.count + 4}].size"  styleClass="element text small" maxlength="255"/> 
	                                        </div> 
	                                    </li>
	                                </ul>
	                        </div>
						</c:forEach>
						</c:if>
				   </div>
				   <a id="anotherHW" class="anotherhw" href="#"><bean:message key="device.add" bundle="device"/> <bean:message key="device.hardware" bundle="device"/></a>
				   </fieldset>
				  </div>
    			</html:form>	
			</div>
		</fieldset>	
</div>		
		